import React, { Component } from 'react'
import { 
  Text, 
  StyleSheet, 
  View, 
  TouchableHighlight, 
  TouchableOpacity, 
  TouchableWithoutFeedback 
} from 'react-native'

export default class TouchableDemo extends Component {
  highlight = () => {
    alert('触碰高亮显示')
  }

  opacity = () => {
    alert('触碰透明显示')
  }

  withoutFeedback = () => {
    alert('触碰无反馈')
  }

  render() {
    return (
      <View style={[styles.container]}>
        <TouchableHighlight onPress={() => this.highlight()}>
          <View style={[styles.item]}>
            <Text style={[styles.h3]}>触碰高亮</Text>
          </View>
        </TouchableHighlight>
        <TouchableOpacity onPress={() => this.opacity()}>
          <View style={[styles.item]}>
            <Text style={[styles.h3]}>触碰透明度</Text>
          </View>
        </TouchableOpacity>
        <TouchableWithoutFeedback onPress={() => this.withoutFeedback()}>
          <View style={[styles.item]}>
            <Text style={[styles.h3]}>触碰无反馈</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  item: {
    marginBottom: 20,
    padding: 10,
    borderWidth: 1,
    borderColor: 'red',
  },
  h3: {
    fontSize: 24,
    fontWeight: 'bold'
  }
})
